﻿<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    Inherits="Quiz" Title="Filberts Filmquiz" CodeBehind="Quiz.aspx.cs" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="NavPlaceholder" runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainPlaceHolder" runat="Server">
    <input type="hidden" id="imageNo" runat="server" />
    <div id="quizButtonWrapper" runat="server">
        <asp:PlaceHolder ID="quizButtonsPlaceholder" runat="server"></asp:PlaceHolder>
    </div>
    <asp:Label ID="notLoggedInLabel" runat="server" Text="Du skal være logget ind for at se og deltage i quizzen"></asp:Label>
    <div id="quizImageContainer">
        <asp:HyperLink ID="imgLink" rel="lightbox" runat="server">
            <div id="quizImageDiv">
                <asp:Image ID="quizImage" Style="max-width: 500px" runat="server" />
            </div>
        </asp:HyperLink>
        <asp:Label ID="percentageLabel" runat="server" Text="" class="statsHeader"></asp:Label>
    </div>
    <br />
    <asp:Panel ID="Panel1" DefaultButton="answerButton" runat="server">
        <div id="answerContainer">
            <div id="answerTableContainer">
                <asp:Table ID="answerTable" runat="server">
                    <asp:TableRow>
                        <asp:TableCell>
                            <asp:TextBox ID="answerText" runat="server" autocomplete="off" AutoCompleteType="Disabled"></asp:TextBox></asp:TableCell>
                        <asp:TableCell>
                            <div class="quizBtn">
                                <asp:Button ID="answerButton" runat="server" Text="Gæt filmen" OnClick="answerButton_Click" /></div>
                        </asp:TableCell>
                    </asp:TableRow>
                </asp:Table>
            </div>
            <h3>
                <asp:Label ID="movieTitelLabel" runat="server" Text=""></asp:Label></h3>
        </div>
    </asp:Panel>
    <div class="answerTrue" id="answerTrue" runat="server" style="text-align: center;">
        <br />
        <br />
        <asp:Label ID="correctAnswerLabel" runat="server" Text="Svaret er korrekt!"></asp:Label>
        <script type="text/javascript">
            $(document).ready(function () {

                $(".answerTrue").animate({
                    top: '0px'
                }, 500, function () {
                    setTimeout("$('.answerTrue').animate({top: '-100px'}, 500, function() {});", 4000);
                });
            });
        </script>
    </div>
    <div class="allSolved" id="allSolved" runat="server" style="text-align: center;">
        <br />
        <br />
        <asp:Label ID="allAnsweredLabel" runat="server" Text="Tillykke, du har <br />gættet alle filmene!"></asp:Label>
        <script type="text/javascript">
            function animateAllSolved() {
                $(document).ready(function () {
                    $(".allSolved").animate({
                        top: '0px'
                    }, 500, function () {
                    });
                });
            }

            setTimeout("animateAllSolved()", 5000);
        </script>
    </div>
    <div class="answerWrong" id="answerWrong" runat="server" style="text-align: center;">
        <br />
        <br />
        <asp:Label ID="wrongAnswerLabel" runat="server" Text="Svaret er forkert!"></asp:Label>
        <script type="text/javascript">
            $(document).ready(function () {

                $(".answerWrong").animate({
                    top: '0px'
                }, 500, function () {
                    setTimeout("$('.answerWrong').animate({top: '-100px'}, 500, function() {});", 4000);
                });
            });
        </script>
    </div>
    <div id="selectedImageJS">
        <script type="text/javascript">
            var buttonID = document.getElementById('ctl00_MainPlaceHolder_imageNo').value;
            document.getElementById(buttonID).style.backgroundImage = "url('Web_resources/images/off50selected.png')"
        </script>
    </div>
</asp:Content>
